<template>
  <view class="big_box">
    <view class="bgc" :style="bgcHeight"></view>
    <view class="middle_box">
      <view class="ov_box">
        <view class="ov_list" v-for="(item, i) in overviewList" :key="i">
          <view class="ov_item" @click="gotoDetail(item)">
            <view class="img">
              <image :src="item.pic" mode="widthFix"></image>
            </view>
            <view class="small_box">
              <view class="name">{{item.name}}</view>
              <view class="description">{{item.description}}</view>
              <view class="prevent" @click.stop>
                <view class="setMessage" @click="gotoUserSet(item)">
                  修改信息
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
    data() {
      return {
        overviewList: [],
        originallyData: 10,
        state: 0,
        bgcHeight: ""
      };
    },
    onLoad() {
      uni.getSystemInfo({
        success: (res) => {
          this.bgcHeight = "height:" + res.screenHeight*2 + "rpx;"
        }
      })
    },
    onShow() {
      this.getOverviewList()
    },
    onPullDownRefresh() {
      this.getOverviewList()
      this.state = 0
      this.originallyData = 10
      setTimeout(function () {
      	uni.stopPullDownRefresh();
        uni.showToast({
          title: "刷新成功",
          icon: "success",
          duration: 1000
        })
      }, 500);
    },
    async onReachBottom() {
      if(this.state == 0) {
        const res = await uniCloud.database().collection("jiayi-message").orderBy('_id desc').where({state: "show"}).skip(this.originallyData).limit(10).get()
        if(res.result.data.length>0) {
          res.result.data.map(x => {
            this.overviewList.push(x)
          })
          this.originallyData += 10
        } else {
          uni.showToast({
            title: "已经到底了噢",
            icon: "success",
            duration: 1500
          })
          this.state = 1
        }
      }
    },
    methods: {
      async getOverviewList() {
        const openid = uni.getStorageSync('jiayi_openid')
        const db = uniCloud.database()
        const dbCmb = db.command
        const collection = db.collection('jiayi-message')
        const res = await collection.orderBy('_id desc').where(dbCmb.and({user_openid: openid}, {state: "show"})).limit(10).get().then(e => {
          this.overviewList = e.result.data
        })
      },
      gotoDetail(item) {
        uni.navigateTo({
          url: '/subpkg/detail/detail?_id=' + item._id
        })
      },
      gotoUserSet(item) {
        uni.navigateTo({
          url: '/subpkg/user-set/user-set?_id=' + item._id
        })
      }
    }
  }
</script>

<style lang="scss">
.big_box {
    position: relative;
    .bgc {
        position: fixed;
        top: 0;
        z-index: 10;
        background: linear-gradient(to bottom, #a1fffe , #a1ffaa);
        width: 760rpx;
      }
    .middle_box {
      position: absolute;
      top: 0;
      z-index: 11;
      .ov_box {
        .ov_list{
          width: 100%;
          height: 240rpx;
          margin-left: 16rpx;
          .ov_item {
            display: flex;
            margin-bottom: 1px;
            .img {
              text-align: center;
              margin-left: 16rpx;
              width: 220rpx;
              height: 220rpx;
              border-radius: 40rpx;
              overflow: hidden;
              image {
                width: 220rpx;
                max-height: 220rpx;
              }
            }
            .small_box {
              position: relative;
              margin-top: 20rpx;
              margin-left: 26rpx;
              width: 56%;
              .name {
                display: block;
                height: 40rpx;
                font-size: 28rpx;
                line-height: 40rpx;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                line-clamp: 1;
                -webkit-box-orient: vertical;
              }
              .description {
                display: block;
                color: #aaaaaa;
                margin-top: 4rpx;
                height: 90rpx;
                line-height: 30rpx;
                font-size: 22rpx;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                line-clamp: 3;
                -webkit-box-orient: vertical;
              }
              .prevent {
                .setMessage {
                  position: absolute;
                  bottom: 15rpx;
                  right: 250rpx;
                  text-align: center;
                  background-color: #3cffc1;
                  border: 1px solid #3cffc1;
                  border-radius: 40rpx;
                  font-size: 24rpx;
                  color: #fff;
                  width: 150rpx;
                  height: 38rpx;
                  line-height: 38rpx;
                }
              }
            }
          }
        }
      }
      .bottom-login {
        position: fixed;
        display: flex;
        bottom: 0;
        width: 100%;
        height: 40px;
        font-size: 16px;
        line-height: 40px;
        padding-left: 20px;
        background-color: #fff;
        color: #ff8686;
      }
    }
  }
</style>
